<template>
	<view class="page-body pd40">
		<!-- <image src="" mode=""></image> -->
		<!-- <view class="h3"></view> -->
		<image class="h3" src="/static/img/user/invite_title.png" mode=""></image>
		<view class="invite-cont">
			<view class="invite-t">您的邀请码</view>
			<view class="flex invite-code">
				<view v-for="(value,ii) in inviteCodeArr" :key="ii">{{value}}</view>
			</view>
			<view class="button btn-invitecode" @click="inviteCode">复制邀请码</view>
			<view class="invite-qrcode" @longpress="savePic">
				<!-- <image :src="Data.imgUrl"  @longpress="savePic"></image> -->
				<tki-qrcode cid="qrcode" ref="qrcode" :val="Data.imgUrl" :size="size" :onval="true" :loadMake="true" :usingComponents="true" :showLoading="false" />
			</view>
			<view class="p" >长按二维码即可保存</view>
			<view class="button primary" @click="downloadUrl">复制专属链接邀请好友</view>
			<view class="p">{{Data.downloadUrl}}</view>
		</view>
		<view class="tip flex">
			<!-- <view class="key flex0">1</view> -->
			<view class="flex1">长按图片下载二维码，朋友扫码打开链接或点击复制邀请按钮分享朋友注册下载APP</view>
		</view>
		<!-- <view class="tip flex">
			<view class="key flex0">2</view>
			<view class="flex1">注册页面，好友输入您的专属邀请码</view>
		</view> -->
	</view>
</template>

<script>
	var that;
	import {httpReq} from '@/utils/request.js';
	import tkiQrcode from "@/components/tki-qrcode.vue";
	export default {
		data() {
			return {
				url:"/static/img/guanfang.jpg",
				Data:"",
				inviteCodeArr:[],
				size:296
			};
		},
		onLoad(options){
			that=this;
			this.getInvitePage()
		},
		onShow(){
			
		},
		methods:{
			getInvitePage(){
				let Data = {
					"downloadUrl":"https://uniapp.dcloud.io/README",
					"imgUrl":"http://www.myh.cc/land?t=2&v=30000004time=1576481337"
				}
				this.Data = Data
				that.inviteCodeArr ="300011445".split("")
			},
			inviteCode(){ //复制账号
				let inviteCode = this.Data.inviteCode;
				uni.setClipboardData({
				    data: inviteCode,
				    success: function () {
				        that.$showToast('复制成功')
				    }
				});
			},
			downloadUrl(){ //复制账号
				let downloadUrl = this.Data.downloadUrl;
				uni.setClipboardData({
				    data: downloadUrl,
				    success: function () {
				        that.$showToast('复制成功')
				    }
				});
			},
			savePic(){
				uni.showActionSheet({
					itemList:['保存图片'],
					success:(res)=>{
						if(res.tapIndex==0){
							this.$refs.qrcode._saveCode()
						}
					}
				})
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:"/pages/user/invite/inviteDetail"
			})
		},
		components:{
			tkiQrcode
		}
	}
</script>

<style lang="scss" scoped="">
	.page-body{padding-bottom: 100upx;color: #fff;background: url(../../../static/img/user/invite_bg.jpg) no-repeat left top/750upx auto #af41d2;}
	.h3{padding-top:40upx ;width: 340upx;height: 112upx;display: block;margin: 0 auto;}
	.text{text-align: center;line-height:60upx;font-size: 30upx;}
	.myreward{font-size: 36upx;font-weight: bold;font-style: italic;transform: scaleY(1.5);line-height: 44upx;padding: 20upx 0 22upx;}
	.invite-cont{
		background: #fff;border-radius: 10upx;padding: 40upx;text-align: center;margin: 30upx auto 10upx;width: 636upx;box-sizing: border-box;
		.invite-t{font-size:32upx ;color: #111A34;line-height:46upx;}
		.invite-code{
			justify-content: center;margin-top: 14upx;
			view{width:42upx ;height: 60upx;line-height: 60upx; background: #EFEFEF;color: #F43530;text-align: center;border-radius: 6upx;margin: 0 6upx;}
		}
		.btn-invitecode{width: 170upx;height: 56upx;line-height: 54upx;text-align: center;border-radius: 28upx;color: #A9B0C0;border:1px solid #A9B0C0;margin: 30upx auto 0;font-size: 26upx;background: #fff;}
		.invite-qrcode{margin-top: 40upx;}
		.invite-qrcode image{width: 296upx;height: 296upx;}
		.p{color: #A9B0C0;font-size: 24upx;padding-top: 6upx;}
		.button{margin-top: 28upx;}
	}
	.p{text-align: center;font-size: 28upx;line-height: 50upx;}
	.button.primary{background: #FF7201;}
	.tip{
		align-items: flex-start;margin-top: 26upx; padding:0 16upx;
		.key{width: 16px;height: 16px;line-height:16px ;border-radius:50%;background: rgba(255,255,255,.2);text-align: center;margin-right: 14upx;font-size: 12px;}
	}
</style>
